<!--
 * @Descripttion: '实时预警主页面的Echarts地图'
 * @Author: lilong(lilong@hztianque.com)
 * @Date: 2020-06-06 15:50:54
 * @LastEditTime: 2020-07-24 16:49:53
-->
<template>
  <div class="map_item" ref="mapItem" />
</template>

<script>
import echarts from 'echarts'
import sichuan from './CMap-2/demo/Data/sichuan.json'
export default {
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      chart: null,
      // eslint-disable-next-line no-unused-vars
      imageDomZ:
        'image://',
      // eslint-disable-next-line no-unused-vars
      imageDomC:
        'image://',
      // eslint-disable-next-line no-unused-vars
      imageDomH:
        'image://',
      dataTooltip: [], //tooltip数据,
      //模拟数据
      simulatedData: [
        { name: '成都市', value: 11, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '绵阳市', value: 11, nowEvent: 121, overEvent: 222, type: '突发事件预警' },
        { name: '达州市', value: 11, nowEvent: 141, overEvent: 22322, type: '突发事件预警' },
        { name: '雅安市', value: 11, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '阿坝藏族羌族自治州', value: 11, nowEvent: 111, overEvent: 0, type: '突发事件预警' },
        { name: '凉山彝族自治州', value: 11, nowEvent: 'data', overEvent: 22, type: '突发事件预警' },
        { name: '甘孜藏族自治州', value: 11, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '广安市', value: 11, nowEvent: 111, overEvent: 22322, type: '重点人员预警' },
        { name: '巴中市', value: 11, nowEvent: 111, overEvent: 22322, type: '突发事件预警' },
        { name: '眉山市', value: 11, nowEvent: 111, overEvent: 22, type: '突发事件预警' },
      ],
      timeOut: null,
      //地图各区域名字
      dataMap: [
        { name: '成都市' },
        { name: '绵阳市' },
        { name: '自贡市' },
        { name: '攀枝花市' },
        { name: '泸州市' },
        { name: '德阳市' },
        { name: '广元市' },
        { name: '遂宁市' },
        { name: '内江市' },
        { name: '乐山市' },
        { name: '资阳市' },
        { name: '宜宾市' },
        { name: '南充市' },
        { name: '达州市' },
        { name: '雅安市' },
        { name: '阿坝藏族羌族自治州' },
        { name: '凉山彝族自治州' },
        { name: '甘孜藏族自治州' },
        { name: '广安市' },
        { name: '巴中市' },
        { name: '眉山市' },
      ],
    }
  },
  computed: {},
  watch: {
    source: {
      handler() {
        this.updateCharts()
      },
      deep: true,
    },
  },
  mounted() {
    this.chart = this.initCharts()
    this.updateCharts()
    this.fetchData()
    window.addEventListener('resize', () => this.chart.resize(), false)
  },
  methods: {
    //获取容器dom
    initCharts() {
      const myChart = echarts.init(this.$refs.mapItem)
      return myChart
    },
    //渲染数据
    updateCharts() {
      const _that = this
      this.chart.clear()
      // this.chart.resize()
      echarts.registerMap('SICHUAN', sichuan)
      //扎点位置
      const geoCoordMap = {
        '成都市': [104.065735, 30.659462],
        '绵阳市': [104.741722, 31.96402],
        '自贡市': [104.773447, 29.352765],
        '攀枝花市': [101.716007, 26.580446],
        '泸州市': [105.45336, 28.38934],
        '德阳市': [104.208651, 31.427991],
        '广元市': [105.829757, 32.433668],
        '遂宁市': [105.571331, 30.513311],
        '内江市': [105.066138, 29.78708],
        '乐山市': [103.761263, 29.582024],
        '资阳市': [104.941917, 30.322211],
        '宜宾市': [104.630825, 28.460189],
        '南充市': [106.082974, 31.695281],
        '达州市': [107.502262, 31.209484],
        '雅安市': [102.702033, 29.997722],
        '阿坝藏族羌族自治州': [102.221374, 31.899792],
        '凉山彝族自治州': [102.258746, 27.886762],
        '甘孜藏族自治州': [99.963815, 30.050663],
        '广安市': [106.633369, 30.656398],
        '巴中市': [106.953669, 31.858809],
        '眉山市': [103.831788, 30.048318],
      }
      const geoCoordMapH = {
        '成都市': [103.565735, 30.659462],
        '绵阳市': [105.041722, 31.56402],
        '自贡市': [105.173447, 29.252765],
        '攀枝花市': [101.816007, 26.880446],
        '泸州市': [105.75336, 28.08934],
        '德阳市': [104.508651, 31.227991],
        '广元市': [106.229757, 32.633668],
        '遂宁市': [105.271331, 30.613311],
        '内江市': [105.266138, 29.58708],
        '乐山市': [103.261263, 29.082024],
        '资阳市': [105.341917, 30.322211],
        '宜宾市': [104.930825, 28.760189],
        '南充市': [106.682974, 31.295281],
        '达州市': [107.902262, 31.709484],
        '雅安市': [102.702033, 30.797722],
        '阿坝藏族羌族自治州': [103.221374, 31.899792],
        '凉山彝族自治州': [102.858746, 27.886762],
        '甘孜藏族自治州': [100.963815, 30.050663],
        '广安市': [106.233369, 30.556398],
        '巴中市': [107.253669, 32.198809],
        '眉山市': [104.31788, 30.048318],
      }
      const geoCoordMapC = {
        '成都市': [104.465735, 30.659462],
        '绵阳市': [104.441722, 32.56402],
        '自贡市': [104.473447, 29.552765],
        '攀枝花市': [101.416007, 26.980446],
        '泸州市': [105.45336, 28.88934],
        '德阳市': [104.908651, 31.027991],
        '广元市': [105.709757, 32.033668],
        '遂宁市': [105.571331, 31.013311],
        '内江市': [104.566138, 29.78708],
        '乐山市': [103.761263, 29.082024],
        '资阳市': [104.641917, 30.322211],
        '宜宾市': [104.430825, 28.960189],
        '南充市': [106.082974, 30.995281],
        '达州市': [107.902262, 32.209484],
        '雅安市': [102.402033, 29.497722],
        '阿坝藏族羌族自治州': [102.81374, 32.399792],
        '凉山彝族自治州': [101.258746, 28.186762],
        '甘孜藏族自治州': [99.963815, 31.050663],
        '广安市': [106.933369, 30.456398],
        '巴中市': [106.953669, 32.558809],
        '眉山市': [103.131788, 29.748318],
      }

      //重点人员扎点数据
      const dataZ = [
        { name: '成都市', value: 11, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '绵阳市', value: 2, nowEvent: 121, overEvent: 222, type: '突发事件预警' },
        { name: '自贡市', value: 3, nowEvent: 111, overEvent: 2222, type: '重点人员预警' },
        { name: '攀枝花市', value: 4, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '泸州市', value: 5, nowEvent: 111, overEvent: 2252, type: '重点人员预警' },
        { name: '德阳市', value: 7, nowEvent: 111, overEvent: 22622, type: '突发事件预警' },
        { name: '广元市', value: 8, nowEvent: 131, overEvent: 2222, type: '高发区域预警' },
        { name: '遂宁市', value: 99, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '内江市', value: 100, nowEvent: 111, overEvent: 2242, type: '突发事件预警' },
        { name: '乐山市', value: 87, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '资阳市', value: 65, nowEvent: 111, overEvent: 222, type: '突发事件预警' },
        { name: '宜宾市', value: 434, nowEvent: 111, overEvent: 22322, type: '重点人员预警' },
        { name: '南充市', value: 33, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '达州市', value: 234, nowEvent: 141, overEvent: 22322, type: '突发事件预警' },
        { name: '雅安市', value: 44, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '阿坝藏族羌族自治州', value: 67, nowEvent: 111, overEvent: 0, type: '高发区域预警' },
        { name: '凉山彝族自治州', value: 76, nowEvent: 'data', overEvent: 22, type: '重点人员预警' },
        { name: '甘孜藏族自治州', value: 87, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '广安市', value: 78, nowEvent: 111, overEvent: 22322, type: '重点人员预警' },
        { name: '巴中市', value: 98, nowEvent: 111, overEvent: 22322, type: '突发事件预警' },
        { name: '眉山市', value: 54, nowEvent: 111, overEvent: 22, type: '突发事件预警' },
      ]
      //突发事件扎点数据
      const dataH = [
        { name: '雅安市', value: 9, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '阿坝藏族羌族自治州', value: 4, nowEvent: 111, overEvent: 0, type: '重点人员预警' },
        { name: '凉山彝族自治州', value: 5, nowEvent: 'data1', overEvent: 33, type: '突发事件预警' },
        { name: '甘孜藏族自治州', value: 65, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '广安市', value: 333, nowEvent: 111, overEvent: 22322, type: '重点人员预警' },
        { name: '巴中市', value: 33, nowEvent: 111, overEvent: 22322, type: '高发区域预警' },
        { name: '眉山市', value: 32, nowEvent: 111, overEvent: 22, type: '高发区域预警' },
      ]
      //高发区域扎点数据
      const dataC = [
        { name: '成都市', value: 121, nowEvent: 111, overEvent: 2222, type: '突发事件预警' },
        { name: '绵阳市', value: 131, nowEvent: 121, overEvent: 222, type: '高发区域预警' },
        { name: '自贡市', value: 33, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '达州市', value: 44, nowEvent: 141, overEvent: 22322, type: '重点人员预警' },
        { name: '雅安市', value: 55, nowEvent: 111, overEvent: 2222, type: '高发区域预警' },
        { name: '阿坝藏族羌族自治州', value: 22, nowEvent: 111, overEvent: 0, type: '突发事件预警' },
        { name: '凉山彝族自治州', value: 88, nowEvent: 'data2', overEvent: 33, type: '高发区域预警' },
      ]

      // eslint-disable-next-line no-unused-vars
      const max = 480, min = 9 // todo
      // eslint-disable-next-line no-unused-vars
      const maxSize4Pin = 100, minSize4Pin = 20

      const convertData = function (el, data) {
        const res = []
        for (let i = 0; i < data.length; i++) {
          const geoCoord = el[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord,
              valueNumber: data[i].value,
              nowEvent: data[i].nowEvent,
              overEvent: data[i].overEvent,
              type: data[i].type,
            })
          }
        }
        return res
      }
      const option = {
        color: ['#FBC903', '#4AFFF3', '#FF4D4D' ],
        legend: {
          icon: 'stack',
          show: true,
          bottom: 10,
          right: 25,
          orient: 'vertical',
          textStyle: {
            color: '#fff',
          },
          itemWidth: 10,
          itemHeight: 10,
          symbolKeepAspect: true,
        },
        tooltip: {
          show: true,
          trigger: 'item',
          //eslint-disable-next-line no-unused-vars
          position: function (point, params, dom, rect, size) {
            // 固定在顶部
            // console.log(point, params)
            if (params.data) {
              if (params.data.name === '攀枝花市') {
                return [point[0], point[1] - 150]
              } else {
                return false
              }
            }
          },
          formatter: function () {
            const params = {}
            // eslint-disable-next-line prefer-destructuring
            params.data = _that.dataTooltip[0]
            // console.log(params.data.name)
            if (params.data) {
              // console.log(params.data.name)
              const htmlFirst = `<div class="map_tips">
               <div class="tips_item_name">
                  <p>${params.data.name}</p>
                  <p>
                  <span>${params.data.type}</span>`
              const htmlEnd = `  </p>
               </div>
               <div class="tips_item_number">
                  <p>当前上报事件：<span>${params.data.nowEvent}</span>件</p>
                  <p>
                     超出告警事件：<span>${params.data.overEvent}</span>件
                  </p>
               </div>
            </div>`
              let html = ''
              if (params.data.overEvent >= 50) {
                html = `<span class='warningRed'>红色预警</span>`
              } else if (params.data.overEvent === 0) {
                html = `<span class='warning'>正常预警</span>`
              } else {
                html = ` <span class='warningOrange'>橙色预警</span>`
              }
              //  console.log(params)
              return htmlFirst + html + htmlEnd
            }
          },
        },
        geo: {
          map: 'SICHUAN',
          show: true,
          roam: false,
          zoom: 1.2,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              areaColor: '#2A324A',
              borderColor: '#82DFFF', //线
              shadowColor: '#092f8f', //外发光
              shadowBlur: 10,
              borderWidth: 1,
            },
            emphasis: {
              areaColor: '#2F6697', //悬浮区背景
            },
          },
        },
        series: [
          {
            type: 'map',
            map: 'SICHUAN',
            zoom: 2.2,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff',
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#82DFFF',
              },
              emphasis: {
                areaColor: '#2B91B7',
              },
            },
            animation: false,
            data: _that.dataMap,
            // data: dataZ,

          },
          //扎点
          {
            name: '重点人员预警',
            type: 'scatter',
            coordinateSystem: 'geo',
            zoom: 2.2,
            symbol: _that.imageDomZ,
            // eslint-disable-next-line no-unused-vars
            symbolSize: [15, 25],
            label: {
              normal: {
                position: 'insideTop',
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: 10,
                  fontWeight: 'bold',
                },
                formatter(value) {
                  return value.data.valueNumber
                },
              },
            },
            data: convertData(geoCoordMap, dataZ),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            zlevel: 1,
            tooltip: {
              show: true,
              trigger: 'item',
              //eslint-disable-next-line no-unused-vars
              position: function (point, params, dom, rect, size) {
                // 固定在顶部
                // console.log(point, params)
                if (params.data) {
                  if (params.data.name === '攀枝花市') { return [point[0], point[1] - 150] } else {
                    return false
                  }
                }
              },
              formatter: function (params) {
                // console.log(params.data.name)
                if (params.data) {
                  // console.log(params.data.name)
                  const htmlFirst = `<div class="map_tips">
               <div class="tips_item_name">
                  <p>${params.data.name}</p>
                  <p>
                  <span>${params.data.type}</span>`
                  const htmlEnd = `  </p>
               </div>
               <div class="tips_item_number">
                  <p>当前上报事件：<span>${params.data.nowEvent}</span>件</p>
                  <p>
                     超出告警事件：<span>${params.data.overEvent}</span>件
                  </p>
               </div>
            </div>`
                  let html = ''
                  if (params.data.overEvent >= 50) {
                    html = `<span class='warningRed'>红色预警</span>`
                  } else if (params.data.overEvent === 0) {
                    html = `<span class='warning'>正常预警</span>`
                  } else {
                    html = ` <span class='warningOrange'>橙色预警</span>`
                  }
                  //  console.log(params)
                  return htmlFirst + html + htmlEnd
                }
              },
            },
          },
          {
            name: '突发事件预警',
            type: 'scatter',
            coordinateSystem: 'geo',
            zoom: 2.2,
            symbol: _that.imageDomH,
            // eslint-disable-next-line no-unused-vars
            symbolSize: [15, 25],
            label: {
              normal: {
                position: 'insideTop',
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: 10,
                  fontWeight: 'bold',
                },
                formatter(value) {
                  return value.data.valueNumber
                },
              },
            },
            data: convertData(geoCoordMapH, dataH),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            zlevel: 1,
            tooltip: {
              show: true,
              trigger: 'item',
              //eslint-disable-next-line no-unused-vars
              position: function (point, params, dom, rect, size) {
                // 固定在顶部
                // console.log(point, params)
                if (params.data) {
                  if (params.data.name === '攀枝花市') { return [point[0], point[1] - 150] } else {
                    return false
                  }
                }
              },
              formatter: function (params) {
                // console.log(params.data.name)
                if (params.data) {
                  // console.log(params.data.name)
                  const htmlFirst = `<div class="map_tips">
               <div class="tips_item_name">
                  <p>${params.data.name}</p>
                  <p>
                  <span>${params.data.type}</span>`
                  const htmlEnd = `  </p>
               </div>
               <div class="tips_item_number">
                  <p>当前上报事件：<span>${params.data.nowEvent}</span>件</p>
                  <p>
                     超出告警事件：<span>${params.data.overEvent}</span>件
                  </p>
               </div>
            </div>`
                  let html = ''
                  if (params.data.overEvent >= 50) {
                    html = `<span class='warningRed'>红色预警</span>`
                  } else if (params.data.overEvent === 0) {
                    html = `<span class='warning'>正常预警</span>`
                  } else {
                    html = ` <span class='warningOrange'>橙色预警</span>`
                  }
                  //  console.log(params)
                  return htmlFirst + html + htmlEnd
                }
              },
            },
          },
          {
            name: '高发区域预警',
            type: 'scatter',
            coordinateSystem: 'geo',
            zoom: 2.2,
            symbol: _that.imageDomC,
            // eslint-disable-next-line no-unused-vars
            symbolSize: [15, 25],
            label: {
              normal: {
                position: 'insideTop',
                show: true,
                textStyle: {
                  color: '#000',
                  fontSize: 10,
                  fontWeight: 'bold',
                },
                formatter(value) {
                  return value.data.valueNumber
                },
              },
            },
            data: convertData(geoCoordMapC, dataC),
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            zlevel: 1,
            tooltip: {
              show: true,
              trigger: 'item',
              //eslint-disable-next-line no-unused-vars
              position: function (point, params, dom, rect, size) {
                // 固定在顶部
                // console.log(point, params)
                if (params.data) {
                  if (params.data.name === '攀枝花市') { return [point[0], point[1] - 150] } else {
                    return false
                  }
                }
              },
              formatter: function (params) {
                // console.log(params.data.name)
                if (params.data) {
                  // console.log(params.data.name)
                  const htmlFirst = `<div class="map_tips">
               <div class="tips_item_name">
                  <p>${params.data.name}</p>
                  <p>
                  <span>${params.data.type}</span>`
                  const htmlEnd = `  </p>
               </div>
               <div class="tips_item_number">
                  <p>当前上报事件：<span>${params.data.nowEvent}</span>件</p>
                  <p>
                     超出告警事件：<span>${params.data.overEvent}</span>件
                  </p>
               </div>
            </div>`
                  let html = ''
                  if (params.data.overEvent >= 50) {
                    html = `<span class='warningRed'>红色预警</span>`
                  } else if (params.data.overEvent === 0) {
                    html = `<span class='warning'>正常预警</span>`
                  } else {
                    html = ` <span class='warningOrange'>橙色预警</span>`
                  }
                  //  console.log(params)
                  return htmlFirst + html + htmlEnd
                }
              },
            },
          },
        ],
      }
      this.chart.setOption(option, true)
    },
    //弹窗出现
    async showTooltipAction() {
      await this.chart.dispatchAction({
        type: 'showTip', //默认显示江苏的提示框
        seriesIndex: 0, //这行不能省
        // dataIndex: 0,
        name: this.dataTooltip[0]['name'],
        // eslint-disable-next-line no-unused-vars
        position: function (point, params, dom, rect, size) {
          // 固定在顶部
          if (params.data) {
            if (params.data.name === '攀枝花市') {
              return [point[0], point[1] - 150]
            } else if (params.data.name === '凉山彝族自治州') {
              return [point[0] + 40, point[1] - 30]
            } else {
              return false
            }
          }
        },
      })
      await this.chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        // dataIndex: this.dataTooltip.length ? 0 : -1,
        name: this.dataTooltip[0]['name'],
      })
      await setTimeout(() => {
        this.chart.dispatchAction({
          type: 'hideTip',
        })
        this.chart.dispatchAction({
          type: 'downplay',
        })
        this.updateCharts()//地图数据刷新
        this.$emit('mapChange')//触发列表刷新
      }, 3000)
    },
    //取数据
    fetchData() {
      this.timeOut = setInterval(() => {
        this.dataTooltip = []
        const s = Math.floor(Math.random() * 20)
        const el = this.simulatedData[s]
        console.log(s)
        if (el) {
          this.dataTooltip.push(el)
        }
        //获取到数据显示弹窗
        if (this.dataTooltip.length > 0) {
          // this.chart.clear()
          // this.updateCharts()
          this.showTooltipAction()//有数据过来时，弹窗出现
        }
      }, 3000)

    },
  },
}
</script>

<style lang='scss' scoped>
.map_item {
  width: 100%;
  height: 100%;
}
/deep/.map_tips {
  z-index:999;
  position: absolute;
  width: 350px;
  top: 0;
  left: 0px;
  height: 120px;
  background: url("../../../../assets/imgs/tipBg@2x.png") no-repeat;
//   transform: rotateZ(0deg);
  background-size: 100% 100%;
  padding: 20px;
  .tips_item_name {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    p {
      font-family: PingFang SC;
      line-height: 25px;
      color: rgba(255, 255, 255, 1);
    }
    > p {
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 14px;
        font-weight: normal;
        padding: 4px 10px;
        line-height: 38px;
        box-sizing: border-box;
        &:first-of-type {
          background: rgba(137, 230, 254, 0.2);
          border-radius: 2px;
        }
      }
      .warningRed {
        margin-left: 10px;
        background: rgba(255, 77, 77, 0.2);
        border: 1px solid rgba(255, 77, 77, 1);
        border-radius: 2px;
        color: rgba(255, 77, 77, 1);
      }
      .warningOrange {
        margin-left: 10px;
        background: rgba(236, 141, 88, 0.2);
        border: 1px solid #ec8d58;
        border-radius: 2px;
        color: #ec8d58;
      }
      .warning {
        margin-left: 10px;
        background: rgba(137, 230, 254, 0.2);
        border: none;
        border-radius: 2px;
        color: #fff;
      }
    }
  }
  .tips_item_number {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    > p {
      font-size: 12px;
      font-family: PingFangSC-Regular;
      line-height: 20px;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>